<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="canvas" width="290" height="370"></canvas>
</body>
<script>
  // 初始化
  function initBorderProgress() {
    let myCanvas = document.getElementById("canvas");
    let ctx = myCanvas.getContext("2d");
    const myCanvasWidth = myCanvas.width; // canvas画布中能准确设置像素的宽度（依据dom真实宽度设置画布像素并不准确，不能有效占满画布）
    const myCanvasHeight = myCanvas.height; // canvas画布中能准确设置像素的高度（依据dom真实宽度设置画布像素并不准确，不能有效占满画布）
    const borderWidth = 10;
    // 先绘制画布原始边框矩形
    ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
    ctx.strokeStyle = "#000"; // 设置线条颜色
    // ctx.rect(
    //   5,
    //   5,
    //  myCanvasWidth - borderWidth,
    //  myCanvasHeight - borderWidth
    // ); // 设置边框所在坐标，是因为线条宽度也占据了像素，所以坐标x,y设置为线条宽度的一半，且矩形宽高需要减去线条宽度，这样才能让矩形沿着画布边缘，铺满画布

    ctx.stroke();
    this.startProgress(ctx, myCanvasWidth-borderWidth, myCanvasHeight-borderWidth, borderWidth);
  }
  function startProgress(ctx, canSetWidth, canSetHeight, borderWidth) {
    console.log('开始',ctx, canSetWidth, canSetHeight, borderWidth)
    clearInterval(this.progressInterval);

    let time=3// s
    let timeCount = 0;
    let percent = `0%`;
    let topProgressBorderLength = 0;
    let rightProgressBorderLength = 0;
    let bottomProgressBorderLength = 0;
    let leftProgressBorderLength = 0;
    // 修正粗细
    let fixnum=6;
    this.progressInterval = setInterval(() => {
      // 上
      if (topProgressBorderLength < canSetWidth) {
        borderWidth=8
        // 如果上边框小于当前canvas画布可设置宽度
        // 绘制矩形进度条top边框
        ctx.beginPath(); // 起始一条路径
        ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
        ctx.strokeStyle = "#339CFF"; // 设置线条颜色
        ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
        topProgressBorderLength +=
                canSetWidth / ((time * 1000) / 4 / 15);
        if (topProgressBorderLength >= canSetWidth) {
          topProgressBorderLength = canSetWidth;
        }
        ctx.moveTo(0, borderWidth / 2);
        ctx.lineTo(topProgressBorderLength, borderWidth / 2);
        ctx.stroke();
      }
      // 右
      if (
              !(topProgressBorderLength < canSetWidth) &&
              rightProgressBorderLength < canSetHeight
      ) {
        borderWidth=10
        // 如果上边框已经绘制完成，右边框小于当前canvas画布可设置高度
        // 绘制矩形进度条right边框
        ctx.beginPath(); // 起始一条路径
        ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
        ctx.strokeStyle = "#339CFF"; // 设置线条颜色
        ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
        rightProgressBorderLength +=
                canSetHeight / ((time * 1000) / 4 / 15);
        if (rightProgressBorderLength >= canSetHeight) {
          rightProgressBorderLength = canSetHeight;
        }
        ctx.moveTo(canSetWidth + borderWidth / 2, borderWidth / 2)+fixnum;
        ctx.lineTo(
                canSetWidth + borderWidth / 2,
                rightProgressBorderLength+fixnum
        );
        ctx.stroke();
      }

      // 下
      if (
              !(rightProgressBorderLength < canSetHeight) &&
              bottomProgressBorderLength < canSetWidth
      ) {
        borderWidth=8
        // 如果右边框已经绘制完成，下边框小于当前canvas画布可设置宽度
        // 绘制矩形进度条bottom边框
        ctx.beginPath(); // 起始一条路径
        ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
        ctx.strokeStyle = "#339CFF"; // 设置线条颜色
        ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
        bottomProgressBorderLength +=
                canSetWidth / ((time * 1000) / 4 / 15);
        if (bottomProgressBorderLength >= canSetWidth) {
          bottomProgressBorderLength = canSetWidth;
        }
        ctx.moveTo(
                canSetWidth + borderWidth / 2+fixnum,
                canSetHeight + borderWidth / 2+fixnum
        );
        ctx.lineTo(
                canSetWidth + borderWidth / 2 - bottomProgressBorderLength+fixnum,
                canSetHeight + borderWidth / 2+fixnum
        );
        ctx.stroke();
      }
      // 左
      if (
              !(bottomProgressBorderLength < canSetWidth) &&
              leftProgressBorderLength < canSetHeight
      ) {
        borderWidth=10
        // 如果上边框已经绘制完成，右边框小于当前canvas画布可设置高度
        // 绘制矩形进度条right边框
        ctx.beginPath(); // 起始一条路径
        ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
        ctx.strokeStyle = "#339CFF"; // 设置线条颜色
        ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
        leftProgressBorderLength +=
                canSetHeight / ((time * 1000) / 4 / 15);
        if (leftProgressBorderLength >= canSetHeight) {
          leftProgressBorderLength = canSetHeight;
        }
        ctx.moveTo(borderWidth / 2, canSetHeight + borderWidth / 2);
        ctx.lineTo(
                borderWidth / 2,
                canSetHeight - leftProgressBorderLength
        );
        ctx.stroke();
      }

      // 绘制百分比进度文字数值
      timeCount += 15;
      percent = `${Math.floor((timeCount / (time * 1000)) * 100)}%`;
      if (Math.floor((timeCount / (time * 1000)) * 100) > 99) {
        percent = `99%`;
      }
      // this.percent=percent
      // this.setState({
      //   percent,
      // });
      // ctx.font="30px Arial";
      // ctx.textAlign="center";
      // ctx.fillText(`${percent}`,150,120);
      if (leftProgressBorderLength === canSetHeight) {
        clearInterval(this.progressInterval);
      }
    }, 15);

  }

  initBorderProgress()

</script>
</html>
